<template>
  <div class="tabs-view common-scrollbar">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="tabs-item"
      :class="{ active: item.value === active }"
      @click="handleClickItem(item)"
    >
      <div class="tabs-item__inner">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue';

import { CommonObject } from '@/api/model/common';

const props = defineProps({
  list: {
    type: Array as PropType<CommonObject[]>,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: [String, Number],
    default: '',
  },
});

const emits = defineEmits(['change', 'update:modelValue']);

const active = ref<string | number>('');

const handleClickItem = (data: CommonObject) => {
  active.value = data.value;
  emits('update:modelValue', active.value);
  emits('change', active.value, data);
};

watch(
  () => props.modelValue,
  (val) => {
    active.value = val;
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.tabs-view {
  height: 32px;
  padding: 2px 10px 0;
  display: flex;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid rgb(160 174 192 / 60%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  flex-wrap: nowrap;

  .tabs-item {
    height: 100%;
    border-radius: 10px 10px 0 0;
    padding-top: 2px;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;

    & + .tabs-item {
      margin-left: 8px;
    }

    &.active,
    &:hover {
      background-color: #1555c1;

      .tabs-item__inner {
        color: #0f64ff;
        background-color: #f5f8ff;
      }
    }

    &:hover {
      opacity: 0.8;
    }

    .tabs-item__inner {
      height: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      color: #31373d;
      font-size: 12px;
      border-radius: 10px 10px 0 0;
      background-color: #fff;
    }
  }
}
</style>
